<template>
  <basic-container class="electric">
    <div class=" ng-isolate-scope el-card box-card is-always-shadow ">
      <div stylle="border:none;border-top: 1px solid #eee;">
        <h4 style="">
          <span style="margin-left: 20px; font-size: 24px">{{powerName}}</span>
        </h4>
      </div>
      <div class='tongji__header-menu attDate'>
        <span @click="getDetail(item)" :class="{'is-active':typeObj.value===item.value}" v-for="(item,index) in dateDIC" :key="index">{{item.label}}</span>
      </div>
    </div>
    <div class="col-sm-12" style='margin-top:5px'>
      <div id="powerChart" class="member-line-chart" _echarts_instance_="1543301061157" style="-webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
        <div id="myPowerChart" :style="{width: '100%', height: '400px'}"></div>
      </div>
    </div>
  </basic-container>
</template>
<script>
import { powerToday, powerDetail } from '@/api/community'
import { dateFormat } from '@/filters/'
export default {
  data() {
    return {
      dateDIC: [
        {
          label: '月',
          value: 'month'
        },
        {
          label: '日',
          value: 'day'
        },
        {
          label: '时',
          value: 'hour'
        }
      ],
      typeObj: {},
      dateRadio: '时',
      powerName: '',
      name: '',
      baseDate: [],
      data: [],
      query: [],
      deviceId: '',
      powerId: '',
      date: '20190109'
      // date: dateFormat(new Date())
      //   .substr(0, 10)
      //   .split('-')
      //   .join('')
    }
  },
  created() {
    this.deviceId = this.$route.query.deviceId
    this.powerId = this.$route.query.powerId
    this.powerName = this.$route.query.powerName
    this.name = this.$route.query.name
    this.init()
  },
  computed: {
    echrtData() {
      let list = []
      this.data.forEach(ele => {
        list.push(ele.power)
      })
      return list
    },
    echrtDate() {
      let data = []
      this.data.forEach(ele => {
        let type = this.typeObj.value
        let createTime
        if (type === 'month') {
          createTime = ele.month + '月'
        } else if (type === 'day') {
          createTime = ele.month + '/' + ele.day + '日'
        } else if (type === 'hour') {
          createTime = ele.hour + '时'
        }
        data.push(createTime)
      })
      return data
    }
  },
  methods: {
    init() {
      //初始化赋值
      this.typeObj = this.dateDIC[2]
      this.getPowerDetail()
    },
    getDetail(item) {
      this.typeObj = item
      this.getPowerDetail()
    },
    getPowerDetail() {
      powerDetail({
        powerId: this.powerId,
        deviceId: this.deviceId,
        type: this.typeObj.value,
        date: this.date
      }).then(response => {
        const obj = response.data.obj || {}
        let list = obj[this.typeObj.value + 's'] || []
        this.data = list
        this.drawPower()
      })
    },
    drawPower() {
      let myChart = this.$echarts.init(document.getElementById('myPowerChart'))
      myChart.setOption({
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [this.name]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   show: true,
        //   orient: 'horizontal',
        //   x: '80%',
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: {
        //       show: true,
        //       type: ['line', 'bar', 'stack', 'tiled']
        //     },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.echrtDate
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °'
          }
        },
        series: [
          {
            name: this.name,
            type: 'line',
            stack: '总量',
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            },
            data: this.echrtData,
            itemStyle: {
              color: '#409eff'
            }
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.electric {
  .canvas {
    position: relative;
    width: 100%;
    height: 300px;
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 300px;
    }
  }
  &__header {
    height: 220px;
    color: #fff;
    background: #1091ed;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s;
    &--close {
      background-color: #606266;
    }
    &--danger {
      background-color: #f56c6c;
    }
    &-title {
      margin-bottom: 15px;
      color: #cee8fb;
      font-size: 12px;
    }
    &-count {
      font-size: 48px;
    }
    &-list {
      margin-top: 30px;
      display: flex;
      align-items: center;
    }
    &-item {
      margin: 0 20px;
      p {
        margin-bottom: 5px;
        color: #cee8fb;
        font-size: 12px;
      }
      span {
        font-size: 16px;
      }
    }
  }
  .list {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    .item {
      padding: 18px 0;
      width: 50%;
      color: #999;
      text-align: center;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-weight: 400;
      &:nth-child(1),
      &:nth-child(3) {
        border-right: 1px solid #eee;
      }
      &__title {
        margin-bottom: 5px;
        font-size: 12px;
      }
      &__count {
        span {
          margin-right: 5px;
          font-size: 24px;
          color: #333333;
        }
        small {
          display: inline-block;
          font-size: 14px;
        }
      }
    }
  }
  .tongji {
    margin-top: 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    &__header {
      padding: 15px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      &-title {
        color: #333;
        font-size: 14px;
      }
      &-menu {
        color: #999;
        .is-active {
          background-color: #f2f2f2;
        }
        span {
          $rwidth: 18px;
          padding: 5px 18px;
          border: 1px solid #dcdfe6;
          border-left: none;
          font-size: 14px;
          cursor: pointer;
          &:first-child {
            border-left: 1px solid #dcdfe6;
            border-top-left-radius: $rwidth;
            border-bottom-left-radius: $rwidth;
          }
          &:last-child {
            border-top-right-radius: $rwidth;
            border-bottom-right-radius: $rwidth;
          }
        }
      }
    }
    &__tip {
      margin-top: 20px;
      width: 55%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      box-sizing: border-box;
      &-item {
        position: relative;
        margin: 5px 0;
        width: 50%;
        text-align: center;
        box-sizing: border-box;
        &--active {
          color: #1091ed;
        }
      }

      &-line {
        display: none;
        position: absolute;
        right: -10px;
        top: 20%;
        width: 1px;
        height: 60%;
        background-color: #eee;
      }
      &-title {
        margin-bottom: 5px;
        color: #666666;
        font-size: 12px;
      }
      &-count {
        margin-right: 5px;
        font-size: 22px;
      }
    }
  }
}
.dd-dataCenter-heading {
  border-bottom: 1px solid #ccc;
  padding-left: 15px;
  font-weight: bold;
  font-size: 22px;
  display: flex;
}
.attDate {
  display: flex;
  margin-left: 70%;
  justify-content: center;
  align-items: Center;
}
</style>